<template>
	<section>
		<el-container class="container">
			<!--左边-->
			<el-aside :width="collapsed ? '65px' : '200px'">
				<el-container>
					<el-header>
						<span class="menu-button" v-if="collapsed" @click.prevent="collapsed = !collapsed"><i class="fa fa-align-justify"></i></span>
						<span v-else class="system-name">{{ systemName }}</span>
					</el-header>
					<el-main>
						<el-menu :default-active="$route.path" :collapse="collapsed">
							<template v-for="(item, index) in menus">
								<el-submenu :index="index + ''" v-if="!item.leaf" :key="index">
									<template slot="title">
										<i :class="item.iconCls"></i>
										<span v-if="!collapsed">{{ item.name }}</span>
									</template>
									<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" @click="$router.push(child.path)">
										{{ child.name }}
									</el-menu-item>
								</el-submenu>
								<el-menu-item v-if="item.leaf && item.children.length > 0" :index="item.children[0].path" :key="item.children[0].path">
									<i :class="item.iconCls"></i>
									{{ item.children[0].name }}
								</el-menu-item>
							</template>
						</el-menu>
					</el-main>
				</el-container>
			</el-aside>
			<!--内容-->
			<el-container>
				<!--页眉-->
				<el-header class="header">
					<el-row>
						<el-col :span="18" class="header-title">
							<span v-if="collapsed" class="system-name">{{ systemName }}</span>
							<span v-else class="menu-button" @click.prevent="collapsed = !collapsed"><i class="fa fa-align-justify"></i></span>
						</el-col>
						<el-col :span="6">
							<span class="el-dropdown-link userinfo-inner">你好：{{ userName }}</span>
						</el-col>
					</el-row>
				</el-header>
				<!--中间-->
				<el-main class="main">
					<transition name="fade" mode="out-in"><router-view></router-view></transition>
				</el-main>
			</el-container>
		</el-container>
	</section>
</template>

<script>
export default {
	data() {
		return {
			collapsed: false,
			systemName: '后台管理',
			userName: '系统管理员',
			menus: []
		};
	},

	methods: {
		//初始化菜单资源
		initMenu() {
			for (let i in this.$router.options.routes) {
				let root = this.$router.options.routes[i];
				if (root.hidden) continue;
				let children = [];
				for (let j in root.children) {
					let item = root.children[j];
					if (item.hidden) continue;
					children.push(item);
				}

				if (children.length < 1) continue;

				this.menus.push(root);
				root.children = children;
			}
		}
	},

	mounted: function() {
		this.initMenu();
	}
};
</script>

<style scoped="scoped" lang="scss">
$width: 100%;
$height: 100%;
$background-color: #0b0a3e;
$header-color: #fff;
$header-height: 60px;

.container {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	.el-aside {
		.el-header {
			line-height: $header-height;
			background-color: $background-color;
			color: $header-color;
			text-align: center;
		}
		.el-container {
			height: $height;
			.el-main {
				padding: 0;
			}
		}
	}

	.main {
		width: $width;
		height: $height;
	}

	.menu-button {
		width: 14px;
		cursor: pointer;
	}

	.userinfo-inner {
		cursor: pointer;
	}

	.el-menu {
		height: $height;
	}

	.header {
		background-color: $background-color;
		color: $header-color;
		text-align: center;
		line-height: $header-height;
		padding: 0;

		.header-title {
			text-align: left;
			span {
				padding: 0 20px;
			}
		}
	}

	.system-name {
		font-size: large;
		font-weight: bold;
	}
}
</style>
